import { FC, useState, useEffect } from "react"
import styles from "./ConsultUsers.less"
import { Image, message, Popconfirm } from "antd"
import { PlusCircleOutlined, MinusCircleFilled } from "@ant-design/icons"
import { history, connect, Dispatch, Loading } from "umi"
import { IDetailState } from "@/models/consultationDetailModel"
import { ConsultationDetailProp } from "../index"
import { IConsultUserL, delConsultUser, IConsultUser } from "@/services/consultationDetail"

/**
 * 会诊成员
 */

interface AttendStatusType {
  name: string,
  value: number,
  color: string,
}


/**
 * 会诊成员接收会诊邀请状态
 */

const attendStatusList: Array<AttendStatusType> = [
  {
    name: "未知",
    value: 0,
    color: "#999999E5",
  },
  {
    name: "拒绝",
    value: 1,
    color: "#F5222DE5",
  },
  {
    name: "接收",
    value: 2,
    color: "#1890FFE5",
  }
]

enum AttendStatusColor {
  unknown = 0,
  decline = 1,
  reception = 2,
}

type ConsultUsersProp = ConsultationDetailProp

const consultUsers: FC<ConsultUsersProp> = ({ conDetail, dispatch, loading }) => {

  let [consultUsersList, setConsultUsersList] = useState<Array<IConsultUser>>([])

  const newconsultUsersList = [
    {
      username: "陈主任",
      hospitalName: "东莞厚街医院",
      titleName: "主任医师",
      deptName: "皮肤科",
      attendStatus: 0,
      attendStatusRes: "未知",
      phone: "132586254"
    },
    {
      username: "何医生",
      hospitalName: "东莞厚街医院",
      titleName: "主治医师",
      deptName: "皮肤科",
      attendStatus: 1,
      attendStatusRes: "拒绝",
      phone: "132586254"
    },
    {
      username: "王医生",
      hospitalName: "东莞厚街医院",
      titleName: "主治医师",
      deptName: "皮肤科",
      attendStatus: 2,
      attendStatusRes: "接收",
      phone: "132586254"
    }
  ]


  /**
   * 初始化成员列表
   */

  const initConsultUsersList = () => {
    if (conDetail?.details?.consultUsers) {
      setConsultUsersList(conDetail.details.consultUsers)
    }
  }


  /**
   * 删除会诊成员
   */
  const delUser = (user: IConsultUser) => {
    delConsultUser({ consultId: conDetail?.details?.id as number, userId: user.consultUserId }).then(res => {
      message.success(res.message)
      refreshConDetail()
    }).catch(error => {
      message.error(error.message)
    })
  }
  /**
   * 重新获取数据
   */
  const refreshConDetail = () => {
    // 重新获取数据
    dispatch({
      type: "conDetail/getConsultDetails",
      payload: {
        consultId: conDetail.consultId
      },
    })
  }

  useEffect(() => {
    initConsultUsersList()
  }, [conDetail.details])


  return (
    <div className={styles.consultUsers}>
      {
        consultUsersList.map((item: IConsultUser, index: number) => {
          return (
            <div className={styles.consultItem} key={index}>
              <div className={styles.userImgBox}>
                <Image
                  className={styles.consultItemUserIcon}
                  src={item.photo ? item.photo : ""}
                  fallback=""
                />
                {
                  conDetail.details && (conDetail.details.status === 1 || 2) ?
                    <Popconfirm
                      title={`确认要删除成员${item.username}吗？`}
                      okText="确认"
                      cancelText="取消"
                      onConfirm={() => { delUser(item) }}
                    >
                      <div className={styles.delBox}>
                        <MinusCircleFilled className={styles.delIcon} />
                      </div>
                    </Popconfirm>
                    : ""
                }

                <div
                  className={styles.consultItemState}
                  style={{ backgroundColor: attendStatusList[item.attendStatus].color }}>{item.attendStatusRes}</div>
              </div>
              <p className={styles.userName}>{item.username}</p>
              <p className={styles.userTypeName}>{item.titleName}</p>
              <p className={styles.userPhone}>{item.phone}</p>
            </div>
          )
        })
      }
      {
        conDetail.details && (conDetail.details.status === 1 || 2) ?
          <div className={`${styles.consultItem} ${styles.addUserBox}`} >
            <PlusCircleOutlined className={styles.addUser} />
            <p className={styles.addUserBt}>添加会诊成员</p>
          </div> : ""
      }



    </div>
  )
}

const mapStateToProps = ({ conDetail, loading }: { conDetail: IDetailState, loading: Loading }) => {
  return {
    conDetail,
    loading
  }
}
export default connect(mapStateToProps)(consultUsers)